<template>
  <div class="app-container">
    <el-form ref="formRef" :model="form" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="岗位编号" prop="workStationCode">
            {{ form.workStationCode }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="岗位名称" prop="workStationName">
            {{ form.workStationName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="岗位描述" prop="workStationDesc">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="form.workStationDesc"
              placement="top-start"
            >
              <p style=" margin: 0;overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
                {{ form.workStationDesc }}
              </p>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form
      v-hasPermi="['WorkStationUser:WorkStationUser:list']"
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="60px"
      class="form-search"
    >
      <el-form-item label="组织" prop="deptName">
        <el-tree-select
          v-model="queryParams.deptName"
          :props="{ label: 'label', children: 'children' }"
          :data="deptOptions"
          filterable
          :check-strictly="true"
          :render-after-expand="false"
          @change="deptChange"
        />
      </el-form-item>
      <el-form-item label="用户名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入姓名"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-hasPermi="['WorkStationUser:WorkStationUser:list']"
      v-loading="loading"
      :data="userList"
      border
      show-overflow-tooltip
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="用户名" align="center" prop="userName" />
      <el-table-column label="姓名" align="center" prop="nickName"></el-table-column>
      <el-table-column label="手机号" align="center" prop="phonenumber"></el-table-column>
      <el-table-column label="组织" align="center" prop="deptName"></el-table-column>
    </el-table>
  </div>
</template>

<script setup name="Data">
import { getWorkStation, getWorkStationUser } from "@/api/base/workstation";
import { treeselect } from "@/api/system/dept";
import { checkPermi } from "@/utils/permission";
import { ref, reactive, useAttrs, toRefs, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const showSearch = ref(true);

const attrs = useAttrs();
const ids = ref([]);
const loading = ref(true);
const single = ref(true);
const multiple = ref(true);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    deptName: undefined,
    nickName: undefined,
  },
});
const userList = ref([]);
const deptOptions = ref([]);
const formRef = ref(null);
const { form, queryParams } = toRefs(data);

function deptChange(val) {
  console.log(val);
}

function getDetail(id) {
  reset();
  if (checkPermi(["WorkStationUser:WorkStationUser:list"])) {
    getWorkStation(id)
      .then((res) => {
        form.value = res.data;
        getList();
      })
      .catch(() => {});
  }
}

/** 查询组织下拉树结构 */
function getDeptTree() {
  treeselect().then((response) => {
    response.data.forEach((item) => {
      setDataValue(item);
    });
    deptOptions.value = response.data;
  });
}

function setDataValue(data) {
  if (!data.value) {
    data.value = data.label;
  }
  if (data.children && data.children.length) {
    data.children.forEach((el) => {
      setDataValue(el);
    });
  }
}

function getList() {
  getWorkStationUser({
    workStationId: form.value.id,
    ...queryParams.value,
  })
    .then((response) => {
      userList.value = response.rows;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 表单重置 */
function reset() {
  form.value = {
    name: undefined,
    type: undefined,
    equipNo: undefined,
    model: undefined,
    factory: undefined,
    segmentCode: undefined,
    workshopCode: undefined,
    status: undefined,
    remark: undefined,
  };
  formRef.value.resetFields();
}
onMounted(async () => {
  const { data } = attrs;
  getDetail(data.id);
  getDeptTree();
});
</script>
